<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('circle_kg_41')">
            <template #right>
                <a class="add-btn" :class="{'add-ok' : kgData.kbiTitle.length > 0 && kgData.attachments.length > 0  && kgData.workCircleFolderId > 0}" @click="saveOrUpdate">
                {{ $t('sure') }}
            </a>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div class="add-body">
                <div class="add-item">
                    <div v-html="$t('circle_kg_39')"></div>
                    <div class="add-input">
                        <van-field v-model="kgData.kbiTitle" :placeholder="$t('circle_kg_40')" maxlength="10" show-word-limit/>
                    </div>
                </div>
                <div class="add-item">
                    <div>{{ $t('circle_kg_41') }}</div>
                    <div class="add-upload">
                        <van-uploader v-show="false" ref="upload" :preview-image="false" v-model="fileList" multiple :max-count="1" :after-read="upload" accept=".txt,.doc,.docx,.xls,.xlsx,.pptx,.pdf">
                            <div class="upicon-box">
                                <van-icon name="plus" size="35" color="#DCDEE0"/>
                            </div>
                        </van-uploader>
                        <div class="upload-body">
                            <div v-if="kgData.attachments.length > 0" class="file-info">
                                <span>{{ kgData.attachments[0].fileName }}</span>
                                <span><van-icon name="cross" @click="() => {kgData.attachments = [];fileList = []}"/></span>
                            </div>
                            <div v-else class="tip-info">
                                <div v-if="fileList.length > 0 && kgData.attachments.length === 0" style="text-align: center"><van-loading size="30px"/></div>
                                <div v-else>{{ $t('circle_kg_75') }}</div>
                            </div>
                            <div @click="$refs.upload.chooseFile()"><van-icon name="add-o" size="30" color="#999999"/></div>
                        </div>
                        <div class="upload-is-down">
                            <div>{{ $t('circle_kg_42') }}</div>
                            <div><van-switch v-model="kbiDownload" active-color="#32B16C" size="24px"/></div>
                        </div>
                    </div>
                </div>
                <div class="add-item">
                    <div v-html="$t('circle_kg_43')"></div>
                    <div class="add-input">
                        <div class="not-data-info">
                            <div>
                                <span class="text-color" v-if="!kgData.workCircleFolderId || kgData.workCircleFolderId === -1">{{ $t('circle_kg_45') }}</span>
                                <span v-else>{{ workCircleFolderName }}</span>
                            </div>
                            <div @click="isShowCatalogBox = true"><van-icon name="add-o" size="30" color="#999999"/></div>
                        </div>
                    </div>
                </div>
                <div class="add-item">
                    <div>{{ $t('circle_kg_46') }}</div>
                    <div class="add-input">
                        <van-radio-group v-model="kgData.kbiDocumentSourceType" style="width: 100%">
                            <div class="item-radio-group"><van-radio :name="0">{{ $t('circle_kg_47') }}</van-radio></div>
                            <div class="item-radio-group item-radio-not-border">
                                <van-radio :name="1">{{ $t('circle_kg_48') }}</van-radio>
                                <van-field v-model="kgData.kbiDocumentSourceUrl" :disabled="kgData.kbiDocumentSourceType === 0" :placeholder="$t('circle_kg_49')" />
                            </div>
                        </van-radio-group>
                    </div>
                </div>
                <div class="add-item">
                    <div>{{ $t('circle_kg_50') }}</div>
                    <div class="add-input">
                        <van-radio-group v-model="kgData.kbiAccessType" style="width: 100%">
                            <div class="item-radio-group"><van-radio name="0">{{ $t('circle_kg_51') }}</van-radio></div>
                            <div class="item-radio-group"><van-radio name="2">{{ $t('circle_kg_53') }}</van-radio></div>
                            <div class="item-radio-group item-radio-not-border">
                                <div style="display: flex;align-items: center;justify-content: space-between" @click="kgData.kbiAccessType = '1'">
                                    <van-radio name="1">{{ $t('circle_kg_52') }}</van-radio>
                                    <div @click="showMemberBox"><van-icon name="add-o" size="30" color="#999999"/></div>
                                </div>
                                <div style="padding: 0 10px;margin-top: 10px">
                                    <div class="not-data-info" v-if="kgData.kbiAccessPersonnelIds.length === 0">
                                        <div>
                                            <span class="text-color">{{ $t('circle_kg_54') }}</span>
                                        </div>
                                    </div>
                                    <div class="member-list" v-else>
                                        <van-tag closeable size="medium" v-for="(item, index) in kgData.kbiAccessPersonnelIds" @close="closeSelectMember(index)" :key="item.tmEntId" type="primary" class="tag-px">
                                            <!--                                @click.stop="setAdmin(item)"-->
                                            <span style="display: flex;align-items: center"><van-icon name="friends" v-show="item.tmRole === 'MANAGER' || item.tmRole === 'T_MANAGER'"/> {{ item.memberName }}</span>
                                        </van-tag>
                                    </div>
                                </div>
                            </div>
                        </van-radio-group>
                    </div>
                </div>
            </div>
        </div>
        <van-overlay :show="isShowMemberBox" @click="isShowMemberBox = false">
            <div class="member-box" @click.stop>
                <div class="box-border">
                    <div class="box-title">
                        <div><a @click="isShowMemberBox = false">{{ $t('circle_kg_13') }}</a></div>
                        <div>{{ $t('circle_kg_12') }}</div>
                        <div><a :class="{'btn-class': selectUserList.length > 0}" @click="okSelectMember">{{ $t('circle_kg_14') }}</a></div>
                    </div>
                    <div>
                        <van-search @search="searchUser" v-model="search" :placeholder="$t('circle_kg_15')" />
                    </div>
                    <div class="box-item-list">
                        <van-loading v-if="isLoading" size="50px"/>
                        <van-checkbox-group v-model="selectUserList">
                            <div class="box-item" v-for="item in teamMemberList" :key="item.tmEntId" @click="selectCheckBox(item)">
                                <div><van-checkbox :name="item.tmEntId"></van-checkbox></div>
                                <div>{{ item.memberName }}</div>
                            </div>
                        </van-checkbox-group>
                    </div>
                </div>
            </div>
        </van-overlay>
        <select-catalog :show-box.sync="isShowCatalogBox" :default-checked.sync="kgData.workCircleFolderId" :result-name.sync="workCircleFolderName" :wct-id="this.kgData.wctId.toString()"></select-catalog>
    </div>
</template>

<script>
import { Uploader, Toast, Field, Tag, Overlay, Button, Search, Checkbox, CheckboxGroup, Loading, Icon, RadioGroup, Radio, Switch } from 'vant';
import SelectCatalog from './SelectCatalog';
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'UploadFile',
    components: {
        SelectCatalog,
        vanUploader: Uploader,
        vanToast: Toast,
        vanField: Field,
        vanTag: Tag,
        vanOverlay: Overlay,
        vanButton: Button,
        vanSearch: Search,
        vanCheckbox: Checkbox,
        vanCheckboxGroup: CheckboxGroup,
        vanLoading: Loading,
        vanIcon: Icon,
        vanRadioGroup: RadioGroup,
        vanRadio: Radio,
        vanSwitch: Switch
    },
    data() {
        return {
            fileList: [],
            kgData: {
                kbiTitle: '',
                kbiStatus: 'ON',
                kbiAccessPersonnelIds: [],
                kbiType: 'DOCUMENT',
                wctIsDefultImg: true,
                kbiDocumentSourceType: 0, //文档来源
                kbiDocumentSourceUrl: '',
                kbiAccessType: '0', //访问权限
                kbiDownload: 0, //是否允许下载
                kbiEditType: '1',
                attachments: [],
                sourceType: 1,
                wcId: -1,
                wctId: -1,
                sourceEntryType: 0,
                workCircleFolderId: null, // 文件夹ID
                documentType: 1
            },
            isShowMemberBox: false,
            search: '',
            selectUserList: [],
            teamMemberList: [],
            oldTeamMemberList: [],
            isLoading: false,
            isShowCatalogBox: false,
            workCircleFolderName: '',
            kbiDownload: false
        };
    },
    methods: {
        ...{ cwnDecrypt },
        searchUser() {
            this.teamMemberList = this.oldTeamMemberList.filter(item => {
                if (item.memberName.includes(this.search)) {
                    return item;
                }
            });
        },
        closeSelectMember(index) {
            let entId = this.kgData.kbiAccessPersonnelIds[index];
            this.kgData.kbiAccessPersonnelIds.splice(index, 1);
            this.selectUserList.splice(index, 1);
        },
        showMemberBox() {
            this.kgData.kbiAccessType = '1';
            this.isShowMemberBox = true;
            let list = [];
            this.kgData.kbiAccessPersonnelIds.forEach(item => {
                list.push(item.tmEntId);
            });
            this.selectUserList = list;
        },
        okSelectMember() {
            if (this.selectUserList.length > 0) {
                let list = [];
                this.selectUserList.forEach((item) => {
                    for (let i = 0; i < this.teamMemberList.length; i++) {
                        if (item === this.teamMemberList[i].tmEntId) {
                            let data = this.teamMemberList[i];
                            list.push(data);
                            break;
                        }
                    }
                });
                this.kgData.kbiAccessPersonnelIds = list;
                this.isShowMemberBox = false;
            }
        },
        selectCheckBox(data) {
            let n = this.selectUserList.indexOf(data.tmEntId);
            if (n > -1) {
                this.selectUserList.splice(n, 1);
            } else {
                this.selectUserList.push(data.tmEntId);
            }
        },
        saveOrUpdate() {
            if (this.kgData.kbiTitle.length > 0 && this.kgData.attachments.length > 0) {
                if (this.kgData.kbiDocumentSourceType === 1 && this.kgData.kbiDocumentSourceUrl && this.kgData.kbiDocumentSourceUrl.length > 0) {
                    if (this.kgData.kbiDocumentSourceUrl.toLowerCase().indexOf('http://') === -1 && this.kgData.kbiDocumentSourceUrl.toLowerCase().indexOf('https://') === -1) {
                        Toast({message: '外部链接输入错误，请以http://或https://开头', forbidClick: true});
                        return;
                    }
                }
                this.kgData.kbiDownload = this.kbiDownload ? 1 : 0;
                let data = Object.assign({}, this.kgData);
                if (this.kgData.kbiAccessType === '1' && this.kgData.kbiAccessPersonnelIds.length > 0) {
                    data.kbiAccessPersonnelIds = this.selectUserList;
                } else {
                    data.kbiAccessPersonnelIds = [];
                }
                if (this.kgData.kbiId) {
                    this.$axios.post('/app/api/trainee/kb/item/edit', data).then(res => {
                        Toast({message: this.$t('circle_kg_56'), forbidClick: true});
                        this.$router.go(-1);
                    }).catch(res => {
                        Toast({message: this.$t('circle_kg_38'), forbidClick: true});
                    });
                } else {
                    this.$axios.post('/app/api/trainee/kb/item/save', data).then(res => {
                        Toast({message: this.$t('circle_kg_57'), forbidClick: true});
                        this.$router.go(-1);
                    }).catch(res => {
                        Toast({message: this.$t('circle_kg_38'), forbidClick: true});
                    });
                }
            }
        },
        upload(file) {
            file.status = 'uploading';
            let formData = new FormData();
            formData.append('file', file.file);
            this.$axios.post('/app/api/file', formData).then(res => {
                let data = {
                    orignalFileName: file.file.name,
                    fileName: file.file.name.substring(0, file.file.name.lastIndexOf('.')),
                    url: res.data.url
                };
                this.kgData.attachments.push(data);
                file.status = 'done';
            });
        },
        getKgDataByTtId(ttKbiId) {
            this.$axios.get(`/app/api/trainee/kb/item/detail/${ttKbiId}`).then((res) => {
                this.kgData = res.data;
                this.fileList.push(this.kgData.attachments[0]);
                this.kbiDownload = this.kgData.kbiDownload === '1';
                if (this.kgData.kbiAccessType !== '1') {
                    this.kgData.kbiAccessPersonnelIds = [];
                }
                //获取一下可以选择的成员和访问权限设置的用户的名称
                if (this.teamMemberList.length === 0) {
                    this.isLoading = true;
                    this.$axios.get(`/app/api/trainee/work-circle/team-member/${this.kgData.wctId}`).then(res => {
                        if (res.data && res.data.length > 0) {
                            this.teamMemberList = res.data;
                            this.oldTeamMemberList = [].concat(this.teamMemberList);
                        }
                        this.isLoading = false;
                        if (this.kgData.kbiAccessType === '1' && this.kgData.kbiAccessPersonnelIds.length > 0) {
                            let list = [];
                            this.kgData.kbiAccessPersonnelIds.forEach(item => {
                                for (let i = 0; i < this.oldTeamMemberList.length; i++) {
                                    if (item === this.oldTeamMemberList[i].tmEntId) {
                                        list.push(this.oldTeamMemberList[i]);
                                        break;
                                    }
                                }
                            });
                            this.kgData.kbiAccessPersonnelIds = list;
                        }
                    });
                }
            });
        }
    },
    created() {
        let data = this.$route.query;
        this.kgData.wcId = cwnDecrypt(data.wcId);
        this.kgData.wctId = cwnDecrypt(data.wctId);
        this.kgData.workCircleFolderId = cwnDecrypt(data.workCircleFolderId);
        if (data.ttKbiId) {
            this.getKgDataByTtId(cwnDecrypt(data.ttKbiId));
        } else {
            this.isLoading = true;
            this.$axios.get(`/app/api/trainee/work-circle/team-member/${this.kgData.wctId}`).then(res => {
                if (res.data && res.data.length > 0) {
                    this.teamMemberList = res.data;
                    this.oldTeamMemberList = [].concat(this.teamMemberList);
                }
                this.isLoading = false;
            });
        }
    },
    watch: {
        search() {
            if (this.search === null || this.search === '' || this.search.length === 0) {
                this.teamMemberList = [].concat(this.oldTeamMemberList);
            }
        },
        isShowMemberBox() {
            //
            if (this.selectUserList.length === 0) {
                this.kgData.kbiAccessType = '0';
            } else {
                this.kgData.kbiAccessType = '1';
            }
        }
    }
};
</script>

<style scoped lang="less">
    .upicon-box{
        width: 80px;
        height: 80px;
        margin: 0 8px 8px 0;
        background-color: #f7f8fa;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /deep/.van-overlay {
        z-index: 999;
    }
    .add-body {
        height: 100%;
        overflow-y: auto;
        .add-item {
            margin-bottom: 15px;
            .item-handle {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            &:first-child {
                margin-top: 15px;
            }
            &>div:first-child {
                margin-bottom: 5px;
                padding: 0 10px;
            }
            .add-upload {
                padding: 20px 10px;
                background: #fff;
                /*display: flex;*/
                /*align-content: center;*/
                /*justify-content: space-between;*/
                /*&>div {*/
                /*    display: flex;*/
                /*    align-items: center;*/
                /*    &>span:last-child {*/
                /*        height: 14px;*/
                /*        margin-left: 15px;*/
                /*    }*/
                /*}*/
                .upload-body {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #EEEEEE;
                    .file-info {
                        display: flex;
                        width: 90%;
                        &>span:first-child {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    .tip-info {
                        width: 90%;
                        color: #969799;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .upload-is-down {
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-top: 10px;
                }
            }
            .add-input {
                padding: 20px 10px;
                background: #fff;
                display: flex;
                align-content: center;
                justify-content: space-between;
                /deep/.van-cell {
                    padding: 0;
                }
                .member-list {
                    display: flex;
                    .tag-px {
                        margin-right: 5px;
                        margin-bottom: 5px;
                    }
                }
                .not-data-info {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    &>div:first-child {
                        /*width: 100%;*/
                        /*text-align: center;*/
                        flex: 1;
                        .text-color {
                            color: #969799;
                        }
                    }
                }
                .item-radio-group {
                    padding: 10px 0;
                    border-bottom: 1px solid #EEEEEE;
                    &:first-child {
                        padding-top: 0;
                    }
                    /deep/ .van-cell{
                        padding: 10px;
                        background: #F9F9F9;
                        margin-top: 10px;
                    }
                }
                .item-radio-not-border {
                    border-bottom: none;
                    padding-bottom: 0;
                }
            }
        }
    }
    .overwrite-title {
        display: flex;
        align-content: center;
        justify-content: center;
        height: 55px;
        line-height: 55px;
        font-size: 18px;
        color: #333;
    }
    .add-btn {
        height: 55px;
        line-height: 55px;
        padding: 0 15px;
        font-size: 16px;
        color: #ccc;
    }
    .add-ok {
        color: #1a1a1a !important;
    }
    .member-box {
        background: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        max-height: 600px;
        border-radius: 16px 16px 0 0;
        .box-border {
            padding: 0 15px;
            .box-title {
                height: 48px;
                display: flex;
                align-items: center;
                &>div:first-child{
                    flex: 1;
                    &>a {
                        padding-right: 10px;
                    }
                }
                &>div:last-child {
                    flex: 1;
                    text-align: right;
                    &>a {
                        padding-left: 10px;
                        color: #ACACAC;
                    }
                }
                &>div:nth-child(2) {
                    flex: 2;
                    text-align: center;
                }
                .btn-class {
                    color: #000 !important;
                }
            }
            /deep/.van-search {
                padding: 0 0 10px 0;
            }
            .box-item-list {
                overflow-y: auto;
                max-height: 400px;
                /deep/.van-loading {
                    text-align: center;
                }
                .box-item {
                    display: flex;
                    align-items: center;
                    height: 50px;
                    &>div:first-child {
                        width: 50px;
                    }
                    &>div:last-child {
                        flex-grow: 1;
                    }
                }
            }
        }
    }
</style>
